<template>
	<div id="app">
		<app-header :nav="links" :title="title" :logo="false">
			<template #info>
				<p>A easy and cool tool to transform a csv file into webpage</p>
			</template>
		</app-header>
		<app-container>
			<template #default>
				<app-section id="introduction">
					<header class="major">
						<h2>EasyTable</h2>
					</header>
					<h2>基本介绍</h2>
					<p>
						EasyTable 是一个高效便利的 CSV文件转网页 的开源工具。<br />
						支持自定义配置，支持各种检索模式，使用简单方便。<br /><br />
						EasyTable 是一个开源的项目，其使用了如下的开源项目
					</p>
					<ul>
						<li><a href="https://vuejs.org/">Vue</a></li>
						<li><a href="https://github.com/axios/axios">Axios</a></li>
						<li><a href="https://github.com/chenjiahan/vodal">Vodal</a></li>
						<li><a href="https://github.com/shawroger/Rexine">Rexine</a></li>
						<li><a href="https://github.com/dwqs/v2-table">v2-table</a></li>
					</ul>
				</app-section>

				<app-section id="quick-start">
					<h2>快速开始</h2>
					<pre
						v-highlightjs
					><code class="language-bash">git clone https://github.com/shawroger/easytable.git</code></pre>
					<p>
						或者直接在一个目录准备一个 data.csv 和 index.html 文件，并在
						index.html 中加入如下内容
					</p>
					<pre v-highlightjs><code class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot; /&gt;
        &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot; /&gt;
        &lt;link
            href=&quot;https://unpkg.com/@shawroger/easytable/dist/easytable.css&quot;
            rel=&quot;stylesheet&quot;
        /&gt;
        &lt;title&gt;EasyTable Demo&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
        &lt;script src=&quot;https://unpkg.com/@shawroger/easytable/dist/easytable.js&quot;&gt;&lt;/script&gt;
        &lt;script&gt;
            EasyTable.init()
                .add({
                    index: true, // 使用序号
                    footer: true, //显示页脚
                    target: &quot;#root&quot;, //渲染的 div
                    data: &quot;./data.csv&quot;, // 读取的文件路径
                    title: &quot;EasyTable Demo&quot;, // 标题
                    config: [
                        {
                            able: true,
                            mode: null,
                            label: &quot;列的标题&quot;,
                        },
                        // .. more columns
                    ],
                })
                .render(&quot;#root&quot;);
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
					<h3 id="修改文件">修改文件</h3>
					<p>默认的读取的<code>CSV</code>文件路径</p>
					<ul>
						<li>
							<p>开发模式 <code>/public/data.csv</code></p>
						</li>
						<li>
							<p>部署模式 <code>/data.csv</code></p>
						</li>
					</ul>
					<pre v-highlightjs><code class="language-bash">张三,20,北京
李四,25,上海</code></pre>
					<h3 id="本地运行">本地运行</h3>
					<pre v-highlightjs><code class="language-bash">npm start</code></pre>
					<h3 id="打包部署">打包部署</h3>
					<pre
						v-highlightjs
					><code class="language-bash">npm run build</code></pre>
					<h3 id="最新特性">最新特性</h3>
					<p>
						<code>EasyTable</code>
						已经支持传入数组类型配置，此时将启用数据源切换功能。
					</p>
				</app-section>

				<app-section id="instance">
					<h2 id="实例方法">实例方法</h2>
					<p>所有的实例方法都支持链式操作</p>
					<h3 id="init">init</h3>
					<p>创建一个<code>EasyTable</code>实例</p>
					<h3 id="add">add</h3>
					<p>添加一个一个<code>EasyTable</code>的数据</p>
					<h3 id="render">render</h3>
					<p>渲染到指定的节点</p>
				</app-section>

				<app-section id="data-config">
					<h2 id="数据配置">数据配置</h2>
					<h3 id="data">data</h3>
					<pre v-highlightjs><code class="language-ts">csv: string;</code></pre>
					<p>
						配置项<code>data</code>为<code>EasyTable</code>读取的<code>CSV</code>文件的路径，默认为<code>./data.csv</code>(相对于<code>index.html</code>的路径)，可以为远程跨越资源。
					</p>
					<p>
						如果传入的数据本身就是<code>json</code>格式，<code>EasyTable</code>将直接渲染出来。
					</p>
					<pre v-highlightjs><code class="language-html">&lt;script&gt;
    EasyTable.init()
        .add({
            index: true, // 使用序号
            footer: true, //显示页脚
            target: &quot;#root&quot;, //渲染的 div
            data: &quot;./data.csv&quot;, // 读取的文件路径
            title: &quot;EasyTable Demo&quot;, // 标题
            config: [
                {
                    able: true,
                    mode: null,
                    label: &quot;列的标题&quot;,
                    sort: true,
                },
            ],
        })
        .render(&quot;#root&quot;);
&lt;/script&gt;</code></pre>
					<h3 id="title">title</h3>
					<pre
						v-highlightjs
					><code class="language-ts">title: string;</code></pre>
					<p>
						<code>title</code> 是数据表的标题，如果不设置的话，默认为网页的标题
						<code>document.title</code>
					</p>
					<h3 id="index">index</h3>
					<pre
						v-highlightjs
					><code class="language-ts">index: boolean;</code></pre>
					<p>
						如果想要额外渲染一行序号，可以在配置<code>index</code>为<code>true</code>，默认为不显示序号
					</p>
					<pre v-highlightjs><code class="language-html">&lt;script&gt;
    EasyTable.init().add({
        // ...more configs
        index: true
    }.render(&quot;#root&quot;);
&lt;/script&gt;</code></pre>
					<h3 id="target">target</h3>
					<pre
						v-highlightjs
					><code class="language-ts">target: string;</code></pre>
					<p>选择要渲染的 DIV，默认为<code>#root</code>标记。</p>

					<h3 id="target">footer</h3>
					<pre
						v-highlightjs
					><code class="language-ts">footer: boolean;</code></pre>
					<p>控制是否显示默认页脚，默认为<code>true</code>，即显示页脚。</p>
				</app-section>

				<app-section id="table-config">
					<h2 id="列表配置">列表配置</h2>
					<p>
						<code>EasyTable</code
						>还可以对每一列进行配置，关于每列的配置项在<code>config</code>数组中修改，切记<code>config</code>数组长度要与列的总数相等，除非是空数组选择默认配置，不然会报错。
					</p>
					<h3 id="able">able</h3>
					<pre
						v-highlightjs
					><code class="language-ts">able: boolean;</code></pre>
					<p>
						如果想忽略某一列的渲染，可以在配置<code>able</code>项为<code>false</code>，如果不设置或设置为空数组，将渲染所有列。
					</p>
					<pre v-highlightjs><code class="language-html">&lt;script&gt;
    EasyTable.init()
        .add({
            // ...more configs
            config: [
                {
                    able: true,
                    label: &quot;我会渲染出来&quot;,
                },
                {
                    able: false,
                    label: &quot;我不会被渲染&quot;,
                },
            ],
        })
        .render(&quot;#root&quot;);
&lt;/script&gt;</code></pre>
					<h3 id="sort">sort</h3>
					<pre
						v-highlightjs
					><code class="language-ts">sort: boolean;</code></pre>
					<p>
						如果想开启某一列的排序功能，可以在配置<code>sort</code>项为<code>true</code>。
					</p>
					<h3 id="label">label</h3>
					<pre
						v-highlightjs
					><code class="language-ts">label: string;</code></pre>
					<p>
						<code>label</code> 是数据表每一列的标题，如果不配置的话，默认读取
						<code>CSV</code> 文件的第 1 行。
					</p>
					<pre v-highlightjs><code class="language-html">&lt;script&gt;
    EasyTable.init()
        .add({
            // ...more configs
            config: [
                {
                    label: &quot;第1列的标题&quot;,
                },
                {
                    label: &quot;第2列的标题&quot;,
                },
            ],
        })
        .render(&quot;#root&quot;);
&lt;/script&gt;</code></pre>
					<h3 id="mode">mode</h3>
					<pre v-highlightjs><code class="language-ts">mode:
    null |  // 不检索
    string |  // 字符匹配模式 | 字符全等模式
    Array&lt;string&gt; | // 列表匹配模式
    Array&lt;{ key: string; val: string }&gt; //同上</code></pre>
					<p>
						<code>mode</code>
						规定了数据表每一列的检索方式，如果不设置的话，默认不开启检索模式。
					</p>
					<p>
						<code>mode</code
						>的配置项看似复杂，不过每种检索方式只对应一种描述，所以操作起来并不困难。
					</p>
					<h4 id="不检索模式">不检索模式</h4>
					<pre v-highlightjs><code class="language-html">&lt;script&gt;
    EasyTable.init()
        .add({
            // ...more configs
            config: [
                {
                    able: true,
                    label: &quot;不检索&quot;,
                    mode: null,
                },
                {
                    able: false,
                    label: &quot;依然不检索&quot;,
                    mode: null,
                },
            ],
        })
        .render(&quot;#root&quot;);
&lt;/script&gt;</code></pre>
					<p>将某一列设置为<code>null</code>，该列就不会开启检索功能。</p>
					<h4 id="字符匹配模式">字符匹配模式</h4>
					<pre v-highlightjs><code class="language-html">&lt;script&gt;
    EasyTable.init()
        .add({
            // ...more configs
            config: [
                {
                    able: true,
                    label: &quot;不检索&quot;,
                    mode: null,
                },
                {
                    able: true,
                    label: &quot;字符匹配&quot;,
                    mode: &quot;&quot;,
                },
            ],
        })
        .render(&quot;#root&quot;);
&lt;/script&gt;</code></pre>
					<p>
						将某一列设置为<code>字符串</code>格式，该列就会开启字符匹配检索模式，即该列元素包含检索内容为符合条件，这也是默认配置。
					</p>
					<h4 id="字符全等模式">字符全等模式</h4>
					<pre v-highlightjs><code class="language-html">&lt;script&gt;
    EasyTable.init().add({
        // ...more configs
        config: [{
            able: true,
            label: &quot;不检索&quot;,
            mode: null
        },{
            able: true
            label: &quot;字符匹配&quot;,
            mode: &quot;&quot;
        }，{
            able: true,
            label: &quot;字符全等&quot;,
            mode: &quot;[=]&quot;
        }]
    }).render(&quot;#root&quot;);
&lt;/script&gt;</code></pre>
					<p>
						将某一列设置为<code>字符串</code>格式且值为<code>[=]</code>，该列就会开启字符全等检索模式，即该列元素全等于检索内容为符合条件。
					</p>
					<h4 id="列表匹配模式">列表匹配模式</h4>
					<p>
						将某一列设置为<code>Array&lt;string&gt;</code>或者<code
							>Array&lt;{ key: string; val: string }&gt;</code
						>类型，该列就会列表匹配模式，<code>EasyTable</code>会渲染出一个下拉列表进行检索。
					</p>
					<blockquote>
						<p>如何配置下拉列表</p>
					</blockquote>
					<p>
						如果您的列表显示内容和检索内容相同
						，直接在该列配置一项字符串数组即可。
					</p>
					<pre v-highlightjs><code class="language-html">&lt;script&gt;
    EasyTable.init().add({
        // ...more configs
        config: [{
            able: true,
            label: &quot;姓名&quot;,
            mode: &quot;&quot;
        },{
            able: true,
            label: &quot;年龄&quot;,
            mode: true
        }，{
            able: true,
            label: &quot;住址&quot;
            mode: [&quot;北京&quot;, &quot;上海&quot;, &quot;广州&quot;]
        }]
    }).render(&quot;#root&quot;);
&lt;/script&gt;</code></pre>
					<p>
						如果您的列表显示内容和检索内容不相同，则该列配置<code>包含对象key和val的数组</code>即可。
					</p>
					<pre v-highlightjs><code class="language-html">&lt;script&gt;
    EasyTable.init().add({
        // ...more configs
        config: [{
            able: true,
            label: &quot;姓名&quot;,
            mode: &quot;&quot;
        },{
            able: true,
            label: &quot;年龄&quot;,
            mode: true
        }，{
            able: true,
            label: &quot;住址&quot;
            mode: [
                { val: &quot;BJ&quot;, key:&quot;北京&quot; },
                { val: &quot;SH&quot;, key:&quot;上海&quot; },
                { val: &quot;GZ&quot;, key: &quot;广州&quot; }
            ]
        }]
    }).render(&quot;#root&quot;);
&lt;/script&gt;</code></pre>
				</app-section>
				<app-section id="hooks">
					<h2 id="钩子函数">钩子函数</h2>
					<h3 id="onloaddata">onloadData</h3>
					<p>
						<code>onloadData</code
						>函数钩子在数据初次加载时调用，暴露当前检索模式的数据。
					</p>
					<h3 id="onchangesearch">onChangeSearch</h3>
					<p>
						<code>onChangeSearch</code
						>函数钩子在检索变动时(如切换检索、输入改变)调用，暴露当前检索模式的信息和符合检索内容的数据。
					</p>
					<h3 id="onchangepage">onChangePage</h3>
					<p>
						<code>onChangePage</code
						>函数钩子在换页翻页调用，暴露当前切换到的页数。
					</p>
					<h3 id="onchangeconfig">onChangeConfig</h3>
					<p>
						<code>onChangeConfig</code
						>页面表格数据变化时调用，暴露此时页面数据数组。
					</p>
				</app-section>
				<app-section id="thanks">
					<h2 id="鸣谢">鸣谢</h2>
					<h3 id="open-source">Open Source</h3>
					<p>
						再次感谢以下的开源项目，没有这些优秀的开源项目，也不可能有<code>EasyTable</code>的诞生
					</p>
					<ul>
						<li>
							<p><a href="https://vuejs.org/">vue</a></p>
						</li>
						<li>
							<p><a href="https://github.com/axios/axios">axios</a></p>
						</li>
						<li>
							<p><a href="https://github.com/chenjiahan/vodal">vodal</a></p>
						</li>
						<li>
							<p><a href="https://github.com/shawroger/Rexine">rexine</a></p>
						</li>
						<li>
							<p><a href="https://github.com/dwqs/v2-table">v2-table</a></p>
						</li>
					</ul>
					<h3 id="打赏">打赏</h3>
					<p>如果您对这个项目感兴趣的话，可以打赏来支持我，反正随缘。</p>
					<img
						alt="支付宝收款"
						src="https://pic.downk.cc/item/5ea67bf8c2a9a83be5133d51.jpg"
						width="200"
					/>

					<br />

					<img
						alt="微信收款"
						src="https://pic.downk.cc/item/5ea67b7fc2a9a83be512b52d.png"
						width="200"
					/>
				</app-section>
			</template>
			<template #footer> Roger &copy; {{ new Date().getFullYear() }} </template>
		</app-container>
	</div>
</template>

<script>
import appHeader from "./components/Header.vue";
import appContainer from "./components/Container.vue";
import appSection from "./components/Section.vue";
import appCode from "./components/Code.vue";

export default {
	name: "app",
	components: {
		appHeader,
		appContainer,
		appSection,
		appCode,
	},
	data() {
		return {
			links: [
				{
					href: "introduction",
					name: "基本介绍",
				},
				{
					href: "quick-start",
					name: "快速开始",
				},
				{
					href: "instance",
					name: "实例方法",
				},
				{
					href: "data-config",
					name: "数据配置",
				},
				{
					href: "table-config",
					name: "列表配置",
				},
				{
					href: "hooks",
					name: "钩子函数",
				},
				{
					href: "thanks",
					name: "鸣谢",
				},
			],
			title: "EasyTable",
		};
	},
};
</script>
